<template>
    <div class="login" >
        <div class="container">
            <img src="../assets/bg.jpg" />
            <div class="panel">
                <div class="content ">
                    <div class="switch">
                        <span :class='{"active": active === "login"}' @click='go("login")'>登陆</span>
                        <span>/</span>
                        <span :class='{"active": active === "register"}' @click='go("register")'>注册</span>
                    </div>
                    <div class='form' id="fromLogin">
                        <template v-if='active === "register"'>
                            <div class="input"><input type="text" placeholder="邮箱" id='email' v-model="loginForm.email"/></div>
                            <div class="input"><input type="text" placeholder="用户名" id="username" v-model="loginForm.username"/></div>
                            <div class="input"><input type="text" placeholder="昵称" id="nickname" v-model="loginForm.nickname"/></div>
                            <div class="input"><input type="password" placeholder="密码" id="Password" v-model="loginForm.password"/></div>
                            <div class="input"><input type="password" placeholder="重复密码" id="Passwordrepeat" /></div>
                            <button type="submit" @click="userRegister()">注册</button>
                        </template>

                        <template v-if='active === "login"'>
                            <div class="input"><input type="text"  id="username" v-model="loginForm.username" placeholder="用户名"/></div>
<!--                            <div class="input"><input type="text" id="email" v-model="loginForm.email" placeholder="邮箱"/><label for="username">用户名</label></div>-->
                            <div class="input"><input type="password" id="Password"  v-model="loginForm.password" placeholder="密码"/></div>
                            <button type="button" @click="userLogin()">登陆</button>
                        </template>

                        <el-row>
                            <span>忘记?</span>
                        </el-row>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { userRegister,userLogin } from '../api/user'
    import { setCookie } from '../utils/cookie'
    export default {
        name: "Login",
        data() {
            return {
                active: 'login',
                loginForm:{}
            }
        },
        components: {

        },
        methods: {
            go (type) {
                this.active = type
            },
            userRegister(){
                userRegister(this.loginForm).then(res=>{
                    if (res.code == 20000){
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.active = "login"
                        this.loginForm = {}
                    }
                    if (res.code !== 20000) {
                        this.$message.error(res.msg);
                    }
                    console.log(res)
                }).catch(err=>{
                    this.$message.error("注册失败");
                })
            },
            userLogin(){
                userLogin(this.loginForm).then(res=>{
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    setCookie('token',res.data,7);
                    this.$router.go(-1);
                    this.$router.replace('/');
                    // this.$router.push('/')
                }).catch(err=>{
                    console.log(err )
                })
            },

        },
        beforeMount () {

        },
        mounted() {
        }
    }
</script>
<style scoped lang="less">
    .login{
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: miaowu;
        background: linear-gradient(45deg, rgb(181, 154, 254), rgb(245, 189, 253)) fixed;
    }

</style>
